<template>
  <div>
    <img src=".././assets/logo.png" />
    <h1>动态样式</h1>
    <div
      class="box"
      @click="boxClick"
      :class="{ bgc: boxStatus === false, bor: boxbor === false }"
    >
    <!-- :class="[isActive==1?'active':'']" -->
      点击变色
    </div>
    <!-- css媒体查询 @media -->
    <!-- https://www.runoob.com/cssref/css3-pr-mediaquery.html -->
    <div class="media-box">如果浏览器窗口宽度小于 800 像素则修改背景颜色</div>
    <!-- CSS calc() 函数 -->
    <!-- https://www.runoob.com/cssref/func-calc.html -->
    <div class="calc-box">calc() 函数用于动态计算长度值。</div>
    <!-- 文本超出宽度显示点点点 -->
    <div class="text-box">
      假如这里有很多文本假如这里有很多文本假如这里有很多文本假如这里有很多文本假如这里有很多文本假如这里有很多文本假如这里有很多文本假如这里有很多文本
    </div>
    <!-- 文本超出2或3行显示点点 -->
    <div class="text-two-box">
      假如这里有很多文本假如这里有很多文本假如这里有很多文本假如这里有很多文本假如这里有很多文本假如这里有很多文本假如这里有很多文本假如这里有很多文本
    </div>
    <!-- 文字遇到标点符号空白换行 -->
    <div class="bdfb-box">你好； 垃圾时代峻峰的开发商的 我是你爸爸；</div>
    <div style="marginbottom: 50px"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      boxStatus: false,
      boxbor: true
    }
  },
  methods: {
    boxClick () {
      this.boxStatus = !this.boxStatus
      this.boxbor = !this.boxbor
    }
  },
  mounted () {
    console.log('生命周期222')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box {
  width: 150px;
  height: 150px;
  background: pink;
  cursor: pointer;
}
.bgc {
  background: yellow;
}
.bor {
  border: turquoise 10px solid;
}
.media-box {
  height: 50px;
  background: violet;
}
@media screen and (max-width: 800px) {
  .media-box {
    height: 150px;
    border: violet 2px solid;
    background-color: lightblue;
  }
}
.calc-box {
  height: calc(100vh - 600px);
  /* height: 50px; */
  width: calc(100% - 500px);
  /* width: calc(~"100% - 190px"); */
  background: khaki;
}
.text-box {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 118px;
}
.text-two-box {
  width: 200px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.bdfb-box {
  max-width: 200px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
